/*----------------------------------------*\
  TYPOGRAPHY
\*----------------------------------------*/
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  word-spacing: 0.0625em;
}

body {
  @apply text--base;
  @apply font--regular;
  @apply text-text-800;
}

.text--5xl {
  @apply text-5xl lg:text-6xl xl:text-7xl 3xl:text-8xl;
  @apply leading-tight;
}

.text--4xl {
  @apply text-4xl lg:text-5xl xl:text-6xl 3xl:text-7xl;
  @apply leading-tight;
}

.text--3xl {
  @apply text-3xl lg:text-4xl xl:text-5xl 3xl:text-6xl;
  @apply leading-tight;
}

.text--2xl {
  @apply text-2xl lg:text-3xl xl:text-4xl 3xl:text-5xl;
  @apply leading-tight;
}

.text--xl {
  @apply text-xl lg:text-2xl xl:text-3xl 3xl:text-4xl;
  @apply leading-tight;
}

.text--lg {
  @apply text-lg xl:text-xl 3xl:text-2xl;
}

.text--base {
  @apply text-base xl:text-lg 3xl:text-xl;
}

.text--sm {
  @apply text-sm xl:text-base 3xl:text-lg;
}

.text--xs {
  @apply text-xs xl:text-sm 3xl:text-base;
}

.font--regular,
.text--regular {
  @apply font-regular;
}

.font--italic,
.text--italic {
  @apply font-italic;
}

.font--bold,
.text--bold {
  @apply font-bold;
}

.font--bold-italic,
.text--bold-italic {
  @apply font-bold-italic;
}

.text--negative {
  @apply text-white;
}

.text--default {
  @apply text-text-800;
}

.text--light {
  @apply text-text-500;
}

.text--asterisk::after {
  @apply content-['\202F*'];
  speak: none;

  .text--asterisk ~ * & {
    @apply content-[''];
  }
}

.overtitle {
  @apply flex space-x-2;
  @apply text-secondary-100;
  @apply text-xs;
}

.h1 {
  @apply text--3xl font-bold;
  @apply mb-4;
}

.h2 {
  @apply text--2xl font-bold;
  @apply mb-4;
}

.h3 {
  @apply text--xl font-bold;
  @apply mb-4;
}

.h4 {
  @apply text--lg font-bold;
  @apply mb-4;
}

.h5 {
  @apply text--base font-bold;
  @apply mb-4;
}

.legend {
  @apply text--xs pt-2 text-text-500;
}

figcaption {
  @apply legend;
}

address {
  @apply not-italic;
}

strong,
b {
  @apply font-bold;
}

del,
strike {
  @apply line-through;
}

u {
  @apply underline underline-offset-2;
}

mark {
  @apply bg-primary-200 py-0.5 px-1;
}

em,
i {
  @apply font-italic;
}
